<template>
  <view class="page">
    <view class="tips">注：仅显示最近半年的错题记录</view>
    <template v-if="topicList.length > 0">
      <view class="topic-list">
        <view class="topic-item" v-for="(item, index) in topicList" :key="index">
          <!--					试卷结构名称-->
          <view class="structure-name">{{ item.structureName }}</view>
          <!--					题目名称-->
          <view class="info">
            <text>{{ item.topicName }}</text>
          </view>
          <view class="info">
            <view class="part">
              <text>共\t</text>
              <text class="number blue">{{ item.totalTopicNum }}</text>
              <text>\t题</text>
            </view>

            <view class="part">
              <text>|</text>
            </view>

            <view class="part">
              <text>正确\t</text>
              <text class="number green">{{ item.rightTopicNum }}</text>
              <text>\t题</text>
            </view>

            <view class="part">
              <text>|</text>
            </view>

            <view class="part">
              <text>错误\t</text>
              <text class="number red">{{ item.errorTopicNum }}</text>
              <text>\t题</text>
            </view>

            <view class="part">
              <text>|</text>
            </view>

            <view class="part">
              <text>没做\t</text>
              <text class="number red">{{ item.noDoNum }}</text>
              <text>\t题</text>
            </view>

<!--            <text>共\t</text>-->
<!--            <text class="number blue">{{ item.totalTopicNum }}</text>-->
<!--            <text>\t题</text>-->
<!--            <text>\t|\t</text>-->

<!--            <text>正确\t</text>-->
<!--            <text class="number green">{{ item.rightTopicNum }}</text>-->
<!--            <text>\t题</text>-->
<!--            <text>\t|\t</text>-->

<!--            <text>错误\t</text>-->
<!--            <text class="number red">{{ item.errorTopicNum }}</text>-->
<!--            <text>\t题</text>-->
<!--            <text>\t|\t</text>-->

<!--            <text>没做\t</text>-->
<!--            <text class="number red">{{ item.noDoNum }}</text>-->
<!--            <text>\t题</text>-->
          </view>
          <view class="info">
            <text>{{ `错误率：${item.accuracy}` }}</text>
          </view>
          <view class="footer-btn">
            <view class="btn primary" @click="goToPractice(item, '')">错题重做</view>
            <view class="btn theme" @click="goToPractice(item, 'analysis')">查看解析</view>
          </view>
        </view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </template>
    <empty v-else height="calc(100vh - 100rpx)"></empty>
  </view>
</template>

<script>
import request from "@/utils/request"
import { handleUrlParams } from "@/utils"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import empty from "@/components/empty.vue"
export default {
  components: { uniLoadMore, empty },
  data() {
    return {
      queryParams: {
        classId: "",
        typeCode: "",
      },
      typeName: "",
      pagination: {
        current: 1,
        size: 10,
      },
      topicList: [],
      loadMoreStatusText: "more",
    }
  },
  onLoad(query) {
    this.queryParams.classId = query.classId
    this.queryParams.typeCode = query.typeCode
    this.typeName = decodeURIComponent(query.typeName)
    //动态设置页面标题
    uni.setNavigationBarTitle({
      title: `${this.typeName} - 错题列表`,
    })
    this.resetPaginationAndReload()
  },
  methods: {
    //获取题型错题列表
    getTopicList() {
      return new Promise((resolve, reject) => {
        this.loadMoreStatusText = "loading"
        request({
          url: "brushQuestions/detailAccuracy",
          data: {
            ...this.queryParams,
            ...this.pagination,
          },
          errorHandle: true,
        })
          .then((data) => {
            this.topicList = [...this.topicList, ...data.records]
            if (data.total <= this.topicList.length) {
              this.loadMoreStatusText = "noMore"
            } else {
              this.loadMoreStatusText = "more"
            }
            console.log(this.loadMoreStatusText, "this.loadMoreStatusText")
            resolve()
          })
          .catch(() => {
            this.loadMoreStatusText = "more"
            reject()
          })
      })
    },
    //重置分页并重新加载列表
    resetPaginationAndReload() {
      this.pagination.current = 1
      this.topicList = []
      uni.showLoading({ title: "加载中" })
      this.getTopicList().finally(() => {
        uni.hideLoading()
      })
    },
    //跳转到练习页面
    goToPractice(item, type) {
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/index/index", {
          typeCode: this.queryParams.typeCode,
          structureId: item.structureId,
          currentTab: type,
        }),
      })
    },
  },
  //页面下拉到底部自动加载下一页
  onReachBottom() {
    if (this.loadMoreStatusText === "more") {
      this.pagination.current++
      this.getTopicList()
    }
  },
  //上拉刷新
  onPullDownRefresh() {
    this.resetPaginationAndReload()
  },
}
</script>

<style lang="scss" scoped>
.page {
  background: var(--gray-background-color);
  min-height: 100vh;
  .tips {
    color: var(--text-color-light);
    font-size: 30rpx;
    padding: 30rpx;
  }
  .topic-list {
    padding: 0 30rpx;
    .topic-item {
      background: var(--background-color);
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      .structure-name {
        font-size: 32rpx;
        font-weight: bold;
      }
    }
    .info {
      margin-top: 20rpx;
      font-size: 30rpx;
      color: var(--text-color-light);
			display: flex;
			justify-content: space-between;
      .number {
        font-weight: bold;
        &.blue {
          color: #2874a6;
        }
        &.green {
          color: #2c9f67;
        }
        &.red {
          color: #e74c3c;
        }
      }
    }
    .footer-btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-around;
      .btn {
        padding: 10rpx 40rpx;
        border-radius: 30rpx;
        font-size: 30rpx;
        &.theme {
          background: var(--theme-color);
					color: var(--text-color-white);
        }
        &.primary {
          background: #2874a6;
          color: #fff;
        }
      }
    }
  }
}
</style>
